<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HighJ</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>

<div class="container-fluid">
    <h1 class="text-center">教师信息表</h1>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
        新增教师
    </button>
    <table class="table table-bordered" id="stuTable">

    </table>

    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchName" placeholder="Input Name" name="searchName">
        </div>
        <button type="button" class="btn btn-default btn-primary" onclick="search()">Query</button>
    </form>

</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">教师信息</h4>
            </div>
            <div class="modal-body">
                <form id="formStudent">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Insert name">
                    </div>

                    <div class="form-group">
                        <label for="tid">工号</label>
                        <input type="text" class="form-control" id="tid" name="tid" placeholder="Insert tid">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" name="password"
                               placeholder="Password">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script type="text/javascript">

    function preAdd() {
        $("#tid").val(0);//表示新增
    }

    function editStudent(tid) {
        $('#myModal').modal('show')
        $.ajax({
            url: '/webapi/teacher/gebytid/' + tid
        }).done(function (rs) {
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#tid").val(rs.tid);
        })
    }

    function saveStudent() {
        var data = $("#formStudent").serialize();
        var id = $("#tid").val();
        if (id < 1) {
            //新增
            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data
            }).done(function () {
                $("#stuTable").bootstrapTable("destroy");
                loadTable();
                $('#myModal').modal('hide')
            })
        } else {
            //更新
            $.ajax({
                url: "/webapi/student/update",
                method: "put",
                data: data
            }).done(function () {
                $("#stuTable").bootstrapTable("destroy");
                loadTable();
                $('#myModal').modal('hide')
            })
        }
    }

    function deleteStudent(tid) {
        if (confirm("您确定要删除吗？")) {
            $.ajax({
                url: "/webapi/student/delete/" + tid,
                method: "delete"
            }).done(function () {
                $("#stuTable").bootstrapTable("destroy");
                loadTable();
            });
        }//end if
    }

    function search() {
        $("#stuTable").bootstrapTable("destroy");
        loadTable();
    }

    function btn() {
        let html = '<button href="#" class="btn btn-warning" id="edit" data-toggle="modal" data-target="#editinfo" ' +
            'style="margin-left:15px" title="修改用户">' +
            '<span class="glyphicon glyphicon-info-sign"></span></button>' +
            '<button href="#" class="btn btn-danger" id="delete" data-toggle="modal" data-target="#deleteuser" ' +
            'style="margin-left:15px" title="删除用户">' +
            '<span class="glyphicon glyphicon-trash"></span></button>'
        return html
    }

    function loadTable() {

        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            pagination: true,//设置为true底部显示分页条
            _withStripped: true,
            singleSelect: false,
            pageSize: 3,//每页数据条数
            pageNumber: 1,//页码
            sidePagination: "server",
            queryParams: function (params) {
                var paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "tid",
                    direct: "desc",
                    name: $("#searchName").val()
                };
                return paraObj;
            },
            columns: [{
                field: 'name',
                title: '姓名',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'sex',
                title: '性别',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                field: 'tid',
                title: '工号',
                align: "center",
                halign: "center",
                valign: 'middle'
            }, {
                title: '操作',
                align: "center",
                halign: "center",
                valign: 'middle',
                formatter: btn,
                events:
                    {
                        'click #edit': function (e, value, row, index) {
                            editStudent(row.tid);
                        },
                        'click #delete': function (e, value, row, index) {
                            deleteStudent(row.tid);
                        }
                    }
            }],
            responseHandler: function (res) {//使用responsHandler方法来转换数据格式
                return {
                    "total": res.data.total,//总数据
                    "rows": res.data.content//数据!!!!!此处不能写res.data.content因为该处我返回的是pageUtils的对象，若为page对象可以用content
                };
            }
        })
    }//end of loadTable();

    $(function () {
        loadTable();
    });
</script>
</body>
</html>